<template>
	<div>
		<h1>promise</h1>
		<el-button type="primary" @click="get">get</el-button>
		<h1>nextTick的用处</h1>
		<button ref="btn" type="primary" @click="btnH">{{ btnValue }}</button>
	</div>
</template>

<script>
	import { usePromise } from '@/utils/index'
	export default {
		data() {
			return {
				key: 'value',
				btnValue: '旧的数据'
			}
		},
		methods: {
			get() {
				usePromise('true1')
					.then(val => {
						console.log(val)
					})
					.catch(val => {
						console.log(val)
					})
			},
			btnH() {
				this.btnValue = '||新的数据||'
				console.log(this.$refs.btn.innerHTML)
			}
		},
		//   生命周期
		beforeCreate() {
			// 实例组件刚创建，DOM未创建，data数据未初始化
		},
		created() {
			// data数据初始化完成，DOM未渲染
			// 一般在这里加载请求，请求是异步的，不会影响实例的加载，在这里请求，速度会更快
		},
		beforeMount() {
			// data数据初始化完成，DOM未挂载到界面上
		},
		mounted() {
			// data数据已经初始化完成，DOM挂载到界面上
		},
		beforeUpdate() {
			// 页面上的数据发生改变的之前调用
		},
		updated() {
			// 页面上的数据发生改变的之前调用
		},
		beforeDestroy() {
			// 组件销毁之前
		},
		destroyed() {
			// 组件销毁之后执行
		}
	}
</script>

<style lang="scss" scoped></style>
